import Taro from "@tarojs/taro";
import { useState, useEffect } from "react";
import { View } from "@tarojs/components";
import { AbstractImage, Icon } from "@/components";
import { useDeviceInfo } from "@/store/deviceContext";
import style from "./index.module.scss";
import { usePageDimensions } from "@/hooks/usePageDimensions";
import { ActionKeys, ActionNames, sendAction } from "@/utils/tracking";

interface LoadingScreenProps {
  progress: number;
}

const C22LoadingScreen = ({ progress }: LoadingScreenProps) => {
  const [className, setClassName] = useState("");
  const { navBarBottom } = useDeviceInfo();

  const { heightExclNavWithTabbar } = usePageDimensions();

  useEffect(() => {
    //todo: get channel source
    sendAction(ActionNames.HomeImpression, {[ActionKeys.ChannelSource]: ""})
    Taro.hideTabBar();
  }, []);

  useEffect(() => {
    if (progress === 1) {
      setClassName("fade-out");
      sendAction(ActionNames.HomeClick, {[ActionKeys.ContentName]: ""})
      Taro.showTabBar({ animation: true });
      setTimeout(() => {
        setClassName("hidden");
      }, 1000);
    }
  }, [progress]);

  return (
    <View
      className={`${style["loading-screen"]} ${style[className]}`}
      style={{ height: heightExclNavWithTabbar, top: navBarBottom }}
    >
      <AbstractImage
        type="none"
        className={style["loading-screen-background-image"]}
        isLocal
        src="home-loading-background.jpg"
      />
      <View className={style.overlay}>
        <View className={style["overlay-gradient"]} />
      </View>

      <View className={style["logo-wrapper"]}>
        <Icon
          type="HomeLoadingLogo"
          className={style["logo-icon"]}
          mode="aspectFit"
        />
      </View>

      <View className={style["loading-indicator-wrapper"]}>
        {["top", "bottom"].map((position) => (
          <Icon
            key={position}
            type="LoadingIndicator"
            className={`
                ${style["loading-indicator-icon"]}
                ${style[`loading-indicator-${position}`]}
              `}
            style={{
              transform: `rotate(${
                90 * (progress + (position === "top" ? 1 : -1))
              }deg)`,
            }}
          />
        ))}
      </View>
    </View>
  );
};

export default C22LoadingScreen;
